<template>
    <div style="height: 100%;">
        <el-container>
            <el-main>
                <!-- 标签页 -->
                <el-tabs type="border-card" v-model="activeName">
                    <!--科目列表页-->
                    <el-tab-pane label="科目列表" name="subjectlist">
                        <el-card shadow="never" class="card-container">
                            <el-form :model="searchForm">
                                <el-form-item label="科目名称" class="inline">
                                    <el-input v-model="searchForm.subjectName" placeholder="请输入科目名称"></el-input>
                                </el-form-item>
                                <el-form-item label="科目状态" class="inline">
                                    <el-select v-model="searchForm.enabled" placeholder="请选择科目状态" class="full">
                                        <el-option v-for="item in dicts.system_global_status" :key="item.k" :label="item.k" :value="item.v">{{ item.k }}</el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item class="inline">
                                    <el-button type="primary" @click="getSubjectPage">搜索</el-button>
                                    <el-button @click="reset">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <!-- 下方表格 -->
                        <el-card shadow="never">
                            <!-- 添加科目 导出 -->
                            <div class="toolbar">
                                <el-button type="primary" icon="Plus" :v-auths="['*:*:*','crm:teach:subject:add']" @click="btnSubjectDialog">添加科目</el-button>
                                <el-button type="default" icon="Printer" :v-auths="['*:*:*','crm:teach:subject:export']">导出</el-button>
                            </div>
                            <!-- 表格 -->
                            <el-table row-key="id" :data="tableData" width="100%" border stripe :expand-row-keys="expands" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" @expand-change="expandChange">
                                <el-table-column label="等级管理" type="expand" width="100" align="center">
                                <el-card style="margin: 15px;" shadow="never">
                                    <el-button type="primary" icon="plus" @click="add" style="margin-bottom: 10px" v-auths="['*:*:*','crm:teach:grade:add']">新建等级</el-button>
                                    <el-table :data="gradeList" width="100%" border stripe>
                                    <el-table-column type="index" label="排序" width="60" align="center"/>
                                    <el-table-column label="等级名称" prop="gradeName" align="center" width="200"/>
                                    <el-table-column label="价格" prop="amount" align="center"/>
                                    <el-table-column label="协议" align="center">
                                        <template #default="{row}">
                                        <el-link type="primary" :underline="false" @click="contractDetail(row)">查看协议</el-link>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="启用状态"  prop="enabled" align="center">
                                        <template #default="{row}">
                                        <template v-for="item in dicts.system_global_status">
                                            <el-tag v-if="row.enabled == item.v">{{item.k}}</el-tag>
                                        </template>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="200" align="center">
                                        <template #default="{row}">
                                        <el-link icon="el-icon-edit" type="primary" style="margin-left: 10px" :underline="false" @click="updateGrade(row.id)" v-auths="['*:*:*','crm:teach:grade:update']">修改</el-link>
                                        <el-link icon="el-icon-delete" style="margin-left: 10px" type="danger" :underline="false" @click="delGrade(row.id)" v-auths="['*:*:*','crm:teach:grade:delete']">删除</el-link>
                                        </template>
                                    </el-table-column>
                                    </el-table>
                                </el-card>
                                </el-table-column>
                                <el-table-column label="科目名称" prop="subjectName"></el-table-column>
                                <!-- 科目状态 -->
                                <el-table-column label="科目状态" prop="enabled">
                                <template #default="{row}">
                                    <template v-for="item in dicts.system_global_status">
                                    <el-tag v-if="row.enabled == item.v">{{ item.k }}</el-tag>
                                    </template>
                                </template>
                                </el-table-column>
                                <!-- 操作列表 -->
                                <el-table-column label="操作" width="150" fixed="right">
                                <template #default="scope">
                                    <el-link :underline="false" type="primary" style="margin-right: 10px;" @click="update(scope.row.id)" icon="Edit" v-auths="['*:*:*','crm:teach:subject:update']">编辑</el-link>
                                    <el-link :underline="false" type="danger" @click="del(scope.row.id)" icon="Delete" v-auths="['*:*:*','crm:teach:subject:delete']">删除</el-link>
                                </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页 -->
                            <div class="pagination">
                                <pagination :total="totals" @update:current-page="handleCurrentPageUpdate"
                                    @update:page-size="handlePageSizeUpdate">
                                </pagination>
                            </div>
                        </el-card>
                    </el-tab-pane>
                    <!-- 回收站 -->
                    <el-tab-pane label="回收站" name="recycle">
                        回收站
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <!-- 弹框 -->
        <SubjectDialog v-if="dialogVisible" v-model:dialogVisible="dialogVisible" @subjectChange="getSubjectPage"></SubjectDialog>
    </div>
</template>

<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance, onBeforeMount, reactive, ref } from 'vue';
import { ISubjectList, IsubjectPage, subjectPage, gradeAll, IGradeData } from '@api/teachSubject';
import SubjectDialog from './subjectDialog.vue';
const activeName = ref('subjectlist')
const searchForm = reactive<ISubjectList>({
    current:1,
    size:10,
    subjectName:'',
    enabled:''
})

// 表格数据
const tableData = ref<Partial<IsubjectPage[]>>([])
let gradeList = ref<Partial<IGradeData[]>>([])

// 添加科目
const addClass =()=>{

}

// 导出
const dataExport = () => {

}

// 重置
const reset = () => {

}

// 删除
const del = () => {

}

// 搜索
const GoSearch = () => {
    
}
// 获取展开数据
const expandChange = async (row) => {
    let res = await gradeAll({subjectId:row.id})
    console.log(res,'展开数据获取')
}

// 控制弹框显示
const dialogVisible = ref<boolean>(false)
// 新增学院
const bthDirlog = (id: string) => {
  dialogVisible.value = true
}

// 获取科目管理表格数据
const getSubjectPage = async() => {
    const res = await subjectPage(searchForm)
    let {records,total} = res.data
    tableData.value = records
    totals.value = total
    // console.log(res,'科目管理表格数据')
}

// 页数
const totals = ref(0)

// 分页页码
const handleCurrentPageUpdate = (page: number) => {
  searchForm.current = page
  getSubjectPage()
  console.log(page,'subject页面的页数')
  console.log(searchForm.current,'subject页面的searchForm.current')
}

// 分页一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  searchForm.size = page
  getSubjectPage()
  console.log(page,'subject页面的一页显示多少页')
  console.log(searchForm.size,'subject页面的searchForm.size')
}

// 添加科目
const btnSubjectDialog = () => {
    dialogVisible.value = true
    
}

// 声明周期
onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  if (proxy) {
    (proxy as any).getDicts(['system_global_status', 'system_global_gender'])
  }
  getSubjectPage()
})
</script>



<style scoped lang="scss">
//:deep(.el-main){
//  --el-main-padding:0px
//}
.toolbar{
    display: flex;
    margin-bottom: 15px;
    overflow-y: auto;
}
.inline {
  margin-right: 20px;
  display: inline-flex;
  vertical-align: middle;
  width: 30%;
}

.tableNav {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .info {
    margin-right: 40px;
  }
}
::-webkit-scrollbar {
  width: 0;
  /* 垂直滚动条宽度设为 0 */
  height: 0;
  /* 水平滚动条高度设为 0 */
}

.el-main {
  height: 85vh;
  overflow-y: scroll;
}
</style>